<template>
  <div>
    <van-pull-refresh v-model="isLoading" @refresh="pullDown">
      <top-bar title="活动列表" bgc="backgroud: #fff;"></top-bar>
      <van-list
        style="margin-bottom: 15vh;"
        v-model="loading"
        :finished="completed"
        :immediate-check="false"
        finished-text="没有更多了"
        loading-text="拼命加载中..."
        @load="pullUp"
      >
        <el-row :gutter="10">
          <el-col v-for="(item) in dataList" :key="item._id" style="margin-bottom: 10px;">
            <el-card :body-style="{ padding: '0px' }">
              <img :src="item.actImage" class="image" />
              <div style="padding: 14px;">
                <span style="font-size: 16px;">{{item.acttopic}}</span>
                <div class="bottom clearfix">
                  <time class="time">{{ new Date().getTime() | setTime}}</time>
                  <!-- <el-tag
                    :type="item.affiliated ? 'success': 'danger'"
                    class="tags"
                    size="mini"
                  >{{item.affiliated ? '赛事': '活动'}}</el-tag>-->
                  <el-button type="text" class="button" @click="actDetail(item._id)">查看详情</el-button>
                  <el-button type="text" class="button" @click="rosterClick(item)">报名参加</el-button>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </van-list>
    </van-pull-refresh>
    <!-- 报名弹框 -->
    <van-dialog
      use-slot
      title="请完善报名信息"
      style="height: 70vh; overflow: scroll;"
      v-model="rosterShow"
      showCancelButton
      @confirm="roster"
      @close="rosterClose"
    >
      <van-divider contentPosition="left">学 号</van-divider>
      <van-field type="textarea" v-model="userform.number" placeholder="请输入学号"></van-field>
      <van-divider contentPosition="left">姓 名</van-divider>
      <van-field type="textarea" v-model="userform.name" placeholder="请输入姓名"></van-field>
      <van-divider contentPosition="left">班 级</van-divider>
      <van-field
        readonly
        clickable
        name="college"
        :value="userform.classify"
        placeholder="点击选择班级"
        @click="classPicker = true"
      />
      <van-divider contentPosition="left">电 话</van-divider>
      <van-field type="textarea" v-model="userform.tel" placeholder="请输入电话"></van-field>
      <van-divider contentPosition="left">Q Q</van-divider>
      <van-field type="textarea" v-model="userform.qq" placeholder="请输入qq"></van-field>
    </van-dialog>
    <!-- 班级列表 -->
    <van-popup v-model="classPicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="classList"
        @confirm="onConfirm"
        @cancel="classPicker = false"
      />
    </van-popup>
    <!-- 报名成功 -->
    <van-popup
      :class="msgColor ? 'msgSucColor': 'msgErrColor'"
      v-model="show"
      @close="onClose"
    >{{content}}</van-popup>
  </div>
</template>

<script>
import TopBar from "@/views/component/topBar";
import { mapState } from "vuex";
export default {
  components: {
    TopBar
  },
  data() {
    return {
      dataList: [],
      userform: {},
      affiliated: null,
      pageSize: 10,
      pageNum: 1,
      classList: [],
      classPicker: false,
      loading: false,
      completed: false,
      isLoading: false,
      finished: false,
      msgColor: "",
      content: "",
      show: false,
      rosterShow: false
    };
  },
  mounted() {
    this.getList();
    this.getClassList();
  },
  computed: {
    routePath() {
      return this.$route.name;
    },
    ...mapState({
      userInfo: state => state.userInfo
    })
  },
  methods: {
    getList() {
      let params = {
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        affiliated: this.routePath === "activitylist" ? false : true,
        publishStatus: 4
      };
      this.$api.get("/api/activity/list", { params }).then(res => {
        console.log(res);
        this.dataList.push(...res.data.data.records);
        this.loading = false;
        if (this.pageSize * this.pageNum > res.data.data.total) {
          this.completed = true;
        }
        this.isLoading = false;
      });
    },
    // 上滑加载
    pullUp() {
      if (this.completed) {
        return;
      }
      this.pageNum++;
      this.getList();
    },
    // 下拉刷新
    pullDown() {
      this.pageNum = 1;
      this.dataList = [];
      this.completed = false;
      this.isLoading = true;
      this.getList();
    },
    rosterClick(item) {
      this.userform = this.userInfo;
      this.userform.actId = item._id;
      this.userform.code = item.code;
      this.$set(this.userform, "tel", this.userInfo.telephone);
      this.rosterShow = true;
    },
    roster() {
      console.log(this.userform);
      this.userform.rosterTime = new Date().getTime();
      this.$api
        .post("/api/roster/add", this.userform)
        .then(res => {
          console.log(res);
          this.rosterShow = false;
          this.msgColor = true;
          this.content = res.data.message;
          this.show = true;
        })
        .catch(() => {
          this.content = "已经报名过该活动，不可重复报名";
          this.msgColor = false;
          this.show = true;
        });
    },
    rosterClose() {
      this.rosterShow = false;
    },
    onClose() {
      this.show = false;
    },
    getClassList() {
      this.$api
        .get("/api/organclass/list")
        .then(res => {
          this.classList = [];
          this.isProcessing(res.data.data);
        })
        .catch(err => {
          console.log(err);
        });
    },
    isProcessing(arr) {
      arr.forEach(item => {
        this.classList.push(item.organclass);
      });
    },
    onConfirm(v) {
      this.userform.classify = v;
      this.classPicker = false;
    },
    actDetail(id) {
      this.$router.push({ name: "activitydetail", params: { id } });
    }
  }
};
</script>

<style scoped>
.top-bar {
  display: flex;
  align-items: center;
  height: 10vh;
  padding: 0 20px;
  background-color: #fafafa;
  letter-spacing: 2px;
  box-sizing: border-box;
  font-weight: 600;
  font-size: 17px;
  text-transform: capitalize;
}

.time {
  font-size: 13px;
  margin-bottom: 10px;
  color: #999;
}

.tags {
  display: inline-block;
  margin-top: 10px;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 10px;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
.msgSucColor {
  width: 72vw;
  padding: 4vw;
  font-size: 1.5em;
  font-weight: bold;
  color: #fff;
  text-align: center;
  background-color: #00ff00;
}
.msgErrColor {
  width: 72vw;
  padding: 4vw;
  font-size: 1.5em;
  font-weight: bold;
  color: #fff;
  text-align: center;
  background-color: #ff0000;
}
</style>